<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩主题切换器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: background-color 0.5s ease, color 0.3s ease;
        }
        
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .theme-selector {
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .section-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: white;
            text-align: center;
        }
        
        .preset-themes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .theme-option {
            height: 120px;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        
        .theme-option:hover {
            transform: translateY(-5px);
        }
        
        .theme-preview {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
        
        .theme-name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 0.9rem;
        }
        
        .custom-theme {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        .color-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .color-option {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .color-option label {
            margin-bottom: 8px;
            color: white;
            font-weight: 500;
        }
        
        .color-input {
            width: 60px;
            height: 60px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        
        .color-input::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }
        
        .color-input::-webkit-color-swatch-wrapper {
            padding: 0;
            border-radius: 50%;
        }
        
        .buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .save-theme {
            background: linear-gradient(to right, #00b09b, #96c93d);
        }
        
        .reset-theme {
            background: linear-gradient(to right, #8e2de2, #4a00e0);
        }
        
        .content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .demo-box {
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .demo-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: white;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
        }
        
        .demo-text {
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
        }
        
        footer {
            text-align: center;
            margin-top: auto;
            padding: 20px;
            color: white;
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .preset-themes {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .color-picker {
                flex-direction: column;
                align-items: center;
            }
        }
        
        /* 主题样式 */
        .theme-default {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }
        
        .theme-light {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
        }
        
        .theme-light h1,
        .theme-light .subtitle,
        .theme-light .section-title,
        .theme-light .demo-title,
        .theme-light .demo-text,
        .theme-light footer {
            color: #333;
        }
        
        .theme-dark {
            background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
        }
        
        .theme-nature {
            background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
        }
        
        .theme-ocean {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
        }
        
        .theme-sunset {
            background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
        }
        
        .theme-custom {
            background: linear-gradient(135deg, var(--color1, #6a11cb) 0%, var(--color2, #2575fc) 100%);
        }
    </style>
</head>
<body class="theme-default">
    <div class="container">
        <header>
            <h1><i class="fas fa-palette"></i> 多彩主题切换器</h1>
            <p class="subtitle">选择预设主题或自定义颜色，动态改变页面外观</p>
        </header>
        
        <div class="theme-selector">
            <h2 class="section-title">预设主题</h2>
            
            <div class="preset-themes">
                <div class="theme-option" data-theme="default">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);">
                        默认主题
                    </div>
                    <div class="theme-name">默认主题</div>
                </div>
                
                <div class="theme-option" data-theme="light">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333;">
                        明亮主题
                    </div>
                    <div class="theme-name">明亮主题</div>
                </div>
                
                <div class="theme-option" data-theme="dark">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);">
                        暗黑主题
                    </div>
                    <div class="theme-name">暗黑主题</div>
                </div>
                
                <div class="theme-option" data-theme="nature">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);">
                        自然主题
                    </div>
                    <div class="theme-name">自然主题</div>
                </div>
                
                <div class="theme-option" data-theme="ocean">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);">
                        海洋主题
                    </div>
                    <div class="theme-name">海洋主题</div>
                </div>
                
                <div class="theme-option" data-theme="sunset">
                    <div class="theme-preview" style="background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);">
                        日落主题
                    </div>
                    <div class="theme-name">日落主题</div>
                </div>
            </div>
            
            <h2 class="section-title">自定义主题</h2>
            
            <div class="custom-theme">
                <div class="color-picker">
                    <div class="color-option">
                        <label for="color1">主颜色</label>
                        <input type="color" id="color1" class="color-input" value="#6a11cb">
                    </div>
                    
                    <div class="color-option">
                        <label for="color2">辅颜色</label>
                        <input type="color" id="color2" class="color-input" value="#2575fc">
                    </div>
                </div>
                
                <div class="buttons">
                    <button id="applyCustom" class="apply-theme">应用自定义主题</button>
                    <button id="saveTheme" class="save-theme">保存主题</button>
                    <button id="resetTheme" class="reset-theme">重置主题</button>
                </div>
            </div>
        </div>
        
        <div class="content">
            <div class="demo-box">
                <h3 class="demo-title"><i class="fas fa-text-height"></i> 文本示例</h3>
                <p class="demo-text">这是一个主题切换演示页面。您可以尝试选择不同的主题来查看页面外观的变化。主题切换功能可以让用户根据自己的喜好定制界面外观。</p>
            </div>
            
            <div class="demo-box">
                <h3 class="demo-title"><i class="fas fa-paint-brush"></i> 功能特点</h3>
                <p class="demo-text">✅ 多种预设主题选择<br>
                   ✅ 自定义颜色主题<br>
                   ✅ 平滑过渡动画效果<br>
                   ✅ 自动保存用户偏好<br>
                   ✅ 响应式设计</p>
            </div>
            
            <div class="demo-box">
                <h3 class="demo-title"><i class="fas fa-lightbulb"></i> 使用提示</h3>
                <p class="demo-text">点击预设主题可以立即切换外观。使用颜色选择器创建自己的主题，然后点击"应用自定义主题"。您的选择会自动保存，下次访问时会恢复您的设置。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 多彩主题切换器 | 使用CSS变量和JavaScript实现</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const body = document.body;
            const themeOptions = document.querySelectorAll('.theme-option');
            const color1Input = document.getElementById('color1');
            const color2Input = document.getElementById('color2');
            const applyCustomBtn = document.getElementById('applyCustom');
            const saveThemeBtn = document.getElementById('saveTheme');
            const resetThemeBtn = document.getElementById('resetTheme');
            
            // 从localStorage加载保存的主题
            const savedTheme = localStorage.getItem('theme');
            const savedCustomColors = JSON.parse(localStorage.getItem('customColors')) || { color1: '#6a11cb', color2: '#2575fc' };
            
            if (savedTheme) {
                body.className = savedTheme;
                
                if (savedTheme === 'theme-custom') {
                    color1Input.value = savedCustomColors.color1;
                    color2Input.value = savedCustomColors.color2;
                    applyCustomTheme();
                }
            }
            
            // 预设主题点击事件
            themeOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const theme = this.getAttribute('data-theme');
                    body.className = `theme-${theme}`;
                    localStorage.setItem('theme', `theme-${theme}`);
                });
            });
            
            // 应用自定义主题
            applyCustomBtn.addEventListener('click', function() {
                applyCustomTheme();
                localStorage.setItem('theme', 'theme-custom');
                localStorage.setItem('customColors', JSON.stringify({
                    color1: color1Input.value,
                    color2: color2Input.value
                }));
            });
            
            // 保存自定义主题
            saveThemeBtn.addEventListener('click', function() {
                const themeName = prompt('请为您的主题命名：');
                if (themeName) {
                    const customThemes = JSON.parse(localStorage.getItem('customThemes')) || [];
                    customThemes.push({
                        name: themeName,
                        color1: color1Input.value,
                        color2: color2Input.value
                    });
                    localStorage.setItem('customThemes', JSON.stringify(customThemes));
                    alert(`主题"${themeName}"已保存！`);
                }
            });
            
            // 重置主题
            resetThemeBtn.addEventListener('click', function() {
                body.className = 'theme-default';
                color1Input.value = '#6a11cb';
                color2Input.value = '#2575fc';
                localStorage.setItem('theme', 'theme-default');
            });
            
            // 应用自定义主题的函数
            function applyCustomTheme() {
                body.className = 'theme-custom';
                document.documentElement.style.setProperty('--color1', color1Input.value);
                document.documentElement.style.setProperty('--color2', color2Input.value);
            }
            
            // 初始化颜色选择器
            color1Input.value = savedCustomColors.color1;
            color2Input.value = savedCustomColors.color2;
        });
    </script>
</body>
</html>